<template>
	<view>
		<view class="nav-bar">
			<NavBar>
				<navigator open-type="navigateBack" hover-class="none" class="nav-back-view" slot="left">
					<image src="/static/nav-back-icon.png" class="nav-back"></image>
				</navigator>
				<view slot="center" class="nav-title">动态详情</view>
				<view class="nav-right-view" slot="right">
					<image src="/static/goods-nav-share.png" class="nav-share"></image>
					<view>分享</view>
				</view>
			</NavBar>
		</view>
		<view class="bg-view"></view>
		<view class="card-view" style="margin-top: -40upx;">
			<view class="card-content">
				<view class="name-text">{{entity.title}}</view>
				<view class="time-view">
					<image src="/static/icon-daye.png" class="time-icon"></image>
					<view>{{dateFormat(entity.publishTimes)}}</view>
				</view>
			</view>
		</view>

		<view class="card-view" style="margin-top: 18upx;">
			<image v-if="entity.placardImg" :src="`${IMG_URL}${entity.placardImg}`" mode="widthFix"
				style="width: 100%;"></image>
			<rich-text :nodes="entity.content"></rich-text>
		</view>
		<view style="height: 160upx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailId: '',
				entity: {
					articleId: '',
					title: '',
					coverImg: '',
					placardImg: '',
					publishTimes: '',
					content: ''
				}
			};
		},
		onLoad(options) {
			this.detailId = options.detailId
			this.getRequestDetail()
		},
		methods: {
			async getRequestDetail() {
				uni.$util.showLoading()
				const res = await uni.$api.getArticleFindDetail({
					articleId: this.detailId
				}).finally(uni.finally)
				this.entity = res.data
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 20;

		.nav-back-view {
			@extend .column;

			.nav-back {
				width: 43upx;
				height: 43upx;
			}
		}

		.nav-title {
			font-size: 33rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.nav-right-view {
			@extend .column;
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

			.nav-share {
				width: 31upx;
				height: 31upx;
			}
		}

	}

	.bg-view {
		width: 100%;
		height: 60upx;
		background: #FF2615;
	}

	.card-view {
		width: 707rpx;
		padding: 22upx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;

		.card-content {
			width: 100%;
			@extend .column;


			.name-text {
				width: 100%;
				@extend .text-dot-one;
				-webkit-line-clamp: 2;
				font-size: 25rpx;
				font-weight: 400;
				color: #2C1101;
			}

			.time-view {
				width: 100%;
				@extend .row-start;
				font-size: 22rpx;
				font-weight: 400;
				color: #B8ACA3;
				margin-top: 9upx;

				.time-icon {
					width: 22upx;
					height: 22upx;
					margin-right: 11upx;
				}
			}
		}
	}
</style>